<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>WebUploader演示</title>
</head>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/ajaxfileupload.js"></script>
<style type="text/css">
    #dropzone {
        width: 300px;
        height: 300px;
        border: 2px dashed gray;
        text-align:center;
        line-height:300px;
        font-size:20px
    }

    #dropzone.over {
        width: 300px;
        height: 300px;
        border: 2px dashed red;
    }
    </style>
<body>
     <div  onclick="uploadFile(this)" value="multiFile1" >点击上传</div> 
     <input style="display:none" type="file"  name="multiFile" id="multiFile1"/>
     <br/>	 <br/>	 <br/> 
       <div  onclick="uploadFile(this)" value="multiFile2" >点击上传</div> 
       <input type="file" style="display:none" name="multiFile" id="multiFile2"/>
          <br/>	 <br/>	 <br/>	 
       <div  onclick="uploadFile(this)" value="multiFile3" >点击上传</div> 
       <input type="file" style="display:none" name="multiFile" id="multiFile3"/>
          <br/>	 <br/>	 <br/>
       <div  onclick="uploadFile(this)" value="multiFile4" >点击上传</div> 
       <input type="file" style="display:none" name="multiFile" id="multiFile4"/>
        <!-- <div id="dropzone" >拖拽文件上传</div> -->
       <!--  <div id="dropzone" ><img src="webupLoader/image.png" style="width:100%;height:100%"></div>  -->
        <div id="dropzone" ><embed src="webupLoader/cc.mp4" autostart="false" style="width:100%;height:100%"></embed></div> 
</body>

    
     
<script type="text/javascript">
//文件拖拽开始-------------------------------------------------------------------------
$(function(){
	dragFile("dropzone");
})
function dragFile(DivId){
	var dz = document.getElementById(DivId);
	dz.ondragover = function(ev) {
	    //阻止浏览器默认打开文件的操作
	    ev.preventDefault();
	    this.className = 'over';
	}

	dz.ondragleave = function() {
	    this.className = '';
	}

	dz.ondrop = function(ev) {
	    this.className = '';
	    //阻止浏览器默认打开文件的操作
	    ev.preventDefault();
	    //表单上传文件
	    var formData = new FormData();
	    formData.append('multiFile', ev.dataTransfer.files[0]);
	    uploadFiles(formData);
	}
}

function uploadFiles(formData) {
    var xhr = new XMLHttpRequest();
    xhr.open('POST', 'fileAction!fileUploadStart', true);
    xhr.send(formData);
    xhr.onreadystatechange = function(){
    	if (xhr.readyState == 4) {
    	      //4代表服务器返回完成
    	      if (xhr.status == 200) {
    	        //200代表成功了
    	        alert(xhr.responseText);
    	        //responsetext表示服务器返回的文本,还有一种方式是responseXML是为了获取服务器返回的xml
    	      }
    	      else {
    	        alert("AJAX服务器返回错误！");
    	      }

    }
}
}

//文件拖拽结束------------------------------------------------------------------------
	function uploadFile(obj){
		$("#"+$(obj).attr("value")).unbind("change");
		$("#"+$(obj).attr("value")).change(function(){
			ajaxFileUpload($(obj).attr("value"));
		});
		$("#"+$(obj).attr("value")).trigger("click");
		
	}
	
		 function ajaxFileUpload(id) {
            $.ajaxFileUpload({
                    url: 'fileAction!fileUploadStart', //用于文件上传的服务器端请求地址
                    secureuri: false, //是否需要安全协议，一般设置为false
                    fileElementId:id , //文件上传域的ID
                    dataType: 'json', //返回值类型 一般设置为json
                    success: function (data){
                        //$("#img1").attr("src", data.imgurl);
                        alert(data.msg);
                    },
                    error: function (data, status, e){
                        alert(e);
                    }
                }
            )
        }
</script>
</html>